<template>
  <el-dialog v-model="isVisible" :width="props.width" :title="props.title"
    :show-close="props.showClose && props.disabled" :before-close="handleClose"
    :close-on-click-modal="props.closeOnClickModal" :close-on-press-escape="props.closeOnPressEscape"
    :destroy-on-close="props.destroyOnClose" :class="props.customClass" :top="props.top" :draggable="props.draggable"
    :fullscreen="props.fullscreen" align-center append-to-body center>
    <slot></slot>
    <template v-if="!props.disabled" #footer>
      <slot name="footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleSave">确 定</el-button>
      </slot>
    </template>
  </el-dialog>
</template>
<script setup name="customDialog">
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: ''
  },
  width: {
    type: String,
    default: ''
  },
  top: {
    type: String,
    default: '5vh'
  },
  customClass: {
    type: String,
    default: ''
  },
  disabled: {
    type: Boolean,
    default: false
  },
  showClose: {
    type: Boolean,
    default: true
  },
  draggable: {
    type: Boolean,
    default: false
  },
  closeOnClickModal: {
    type: Boolean,
    default: false
  },
  closeOnPressEscape: {
    type: Boolean,
    default: false
  },
  destroyOnClose: {
    type: Boolean,
    default: false
  },
  fullscreen: {
    type: Boolean,
    default: false
  }
})
const emit = defineEmits(['update:modelValue', 'close', 'save'])
const handleClose = (e) => {
  if (typeof e === 'function') {
    emit('close', e)
  } else {
    isVisible.value = false
    emit('close')
  }
}
const handleSave = (e) => {
  emit('save')
}
const isVisible = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emit('update:modelValue', value)
  }
})
defineExpose({
  handleClose,
  handleSave
})
</script>

<style lang="scss">
.el-dialog {
  &.picView {
    background-color: transparent;
    overflow: hidden;

    .el-dialog__header {
      padding: 0;
      margin: 0;

      .el-dialog__headerbtn {
        top: 40px;
        right: 40px;
        top: 44px;
        right: 44px;
        font-size: 30px;
        color: #fff;
        background-color: var(--el-text-color-regular);
        border-color: #fff;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        opacity: .8;
        box-sizing: border-box;

        .el-dialog__close {
          color: inherit;
        }
      }
    }

    .el-dialog__body {
      width: 100%;
      height: 100%;
      padding: 0;
    }
  }
}
</style>